.bs-popper-arrow,
.bs-popper-arrow::before {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: inherit;
}

.bs-popper-arrow {
  visibility: hidden;
}

.bs-popper-arrow::before {
  border-top-left-radius: 2px;
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

.bs-popper {
  position: absolute;
  max-width: calc(100% - 2rem);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  word-break: break-all;
  word-wrap: break-word;
  border-radius: 0.25rem;
  background: #fff;

  &.popper-fade-enter-active,
  &.popper-fade-leave-active{
    transition: opacity .2s ease-in;
  }
  /*&.popper-fade-enter-from{
    transform: scale(0.8);
  }*/
  &.popper-fade-enter-from,
  &.popper-fade-leave-to{
    opacity: 0;
    //transform: scale(0.8);
  }
  &.popper-fade-leave-from,
  &.popper-fade-enter-to{
    opacity: 1;
    //transform: scale(1);
  }
  /*&.popper-fade-enter-to{
    //opacity: 1;
    transform: scale(1);
  }*/

  &.popper-scale-enter-active,
  &.popper-scale-leave-active{
    transition: opacity .2s, transform .2s;
  }

  &.popper-scale-enter-from,
  &.popper-scale-leave-to{
    opacity: 0;
    transform: scale(0.5);
  }
  &.popper-scale-leave-from,
  &.popper-scale-enter-to{
    opacity: 1;
    transform: scale(1);
  }

  &[data-popper-placement^='top']{
    & > .bs-popper-arrow {
      bottom: -0.25rem;
    }
    /*&[data-transition="popper-scale"]{
      transform-origin: bottom;
    }*/
  }
  &[data-popper-placement='top']{
    &[data-transition="popper-scale"]{
      transform-origin: bottom;
    }
  }
  &[data-popper-placement='top-start']{
    &[data-transition="popper-scale"]{
      transform-origin: 0 bottom;
    }
  }
  &[data-popper-placement='top-end']{
    &[data-transition="popper-scale"]{
      transform-origin: right bottom;
    }
  }

  &[data-popper-placement^='bottom']{
    & > .bs-popper-arrow {
      top: -0.25rem;
    }
    /*&[data-transition="popper-scale"]{
      transform-origin: top;
    }*/
  }

  &[data-popper-placement='bottom-start']{
    &[data-transition="popper-scale"]{
      transform-origin: left top;
    }
  }
  &[data-popper-placement='bottom']{
    &[data-transition="popper-scale"]{
      transform-origin: top;
    }
  }
  &[data-popper-placement='bottom-end']{
    &[data-transition="popper-scale"]{
      transform-origin: right top;
    }
  }

  &[data-popper-placement^='left']{
    & > .bs-popper-arrow {
      right: -0.25rem;
    }
    &[data-transition="popper-scale"]{
      transform-origin: right;
    }
  }

  &[data-popper-placement^='right']{
    > .bs-popper-arrow {
      left: -0.25rem;
    }
    &[data-transition="popper-scale"]{
      transform-origin: left;
    }
  }
}
